<template>
    <a-row v-if="data">
        <a-col :span="12">
            <GMap :longitude="data.longitude" :latitude="data.latitude" @setAddress="setAddress" @setLnglat="setLnglat">
            </GMap>
        </a-col>
        <a-col :span="12">
            <a-card style="margin-left: 10px;">
                <a-form :model="data" :label-col="{ span: 5 }">
                    <a-row gutter="15">
                        <a-col :span="20">
                            <a-form-item label="井ID" name="wellId" :rules="[{ required: true, message: '请输入井ID' }]">
                                <a-input v-model:value="data.wellId" disabled="true" style="width:100%"
                                    placeholder="请输入井号" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="20">
                            <a-form-item label="井名称" name="wellName" :rules="[{ required: true, message: '请输入井名称' }]">
                                <a-input v-model:value="data.wellName" style="width:100%" placeholder="请输入井名" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="20">
                            <a-form-item label="所属部门" name="department">
                                <a-tree-select v-model:value="data.deptId" style="width: 100%" :tree-data="departmentData"
                                    allow-clear placeholder="选择所属部门"
                                    :field-names="{ children: 'children', label: 'name', value: 'id', key: 'id' }"
                                    tree-node-filter-prop="title" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <!-- <a-row>
                        <a-col :span="24">
                            <a-form-item label="纬度">
                                <a-input-number v-model:value="data.latitude" controls-position="right" :step="0.0001"
                                    style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="经度">
                                <a-input-number v-model:value="data.longitude" controls-position="right" :step="0.0001"
                                    style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row> -->
                    <a-row gutter="15">
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="data.province" placeholder="省" style="width:100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="data.city" placeholder="市" style="width:100%" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label-width="10px">
                                <a-input v-model:value="data.county" placeholder="区" style="width:100%" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row><a-button type="primary" style="width:100%" @click="handleUpdate">更新</a-button></a-row>
                </a-form>
            </a-card>
        </a-col>
    </a-row>
</template>
<script setup>
// 该组件在同目录下 -> 引入图标
import GMap from './map'
import { updateOne } from "@/api/well/well.js"
import { queryTree } from '@/module/system/api/dept'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const props = defineProps({
    data: {
        type: Object
    }
})
const departmentData = ref([])

function setAddress(e) {
    props.data.country = e.country
    props.data.province = e.province
    props.data.city = e.city
    props.data.county = e.district
}
function setLnglat(e) {
    console.log(e)
    props.data.latitude = e.lat
    props.data.longitude = e.lng
}

async function handleUpdate() {
    console.log('props.data', props.data);
    updateOne(props.data).then((res) => {
        console.log('updateOne', res)
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
    });
}

// 获取部门信息
async function getDepart() {
    await queryTree().then(res => {
        console.log('部门信息', res);
        // departmentData.value = res.map(item => ({
        //     title: item.deptName,
        //     value: item.id,
        //     key: item.id,
        //     children: mapChildren(item.children)

        // }));
        departmentData.value = res
    })
}
// 递归处理子部门
// function mapChildren(children) {
//     if (!children || children.length === 0) {
//         return [];
//     }
//     return children.map(child => ({
//         title: child.deptName,
//         value: child.id,
//         key: child.id,
//         children: mapChildren(child.children)
//     }));
// }
getDepart()

</script>